<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<cpn :cmessage="message"  :clist="list"></cpn>
		</div>
		
		<template id="cpn">
			<div>
				<h1>父组件向子组件传递信息</h1>
				<p>{{cmessage}}</p>
				<li v-for="item in clist">{{item}}</li>
			</div>
		</template>
		
		<script src="../utils/vue.js"></script>
		<script>
			var cpn = {
				template:"#cpn",
				props:{
					cmessage:String,
					clist:Array,
				}
			}
			
			/**
			 * vm是根组件 root
			 * cpn是子组件
			 * 把vm的数据传给cpn
			 * */
			var vm = new Vue({
				el:"#app",
				data:{
					message:'this is a message',
					list:['star','leaf','sun','luna'],
				},
				components:{
					cpn
				}
			})
		</script>
	</body>
</html>
